<template>
	<view class="uiwu-button">
		<view class="uiwu-button-num">编号：{{dataInfo.device_info?.device_code}}</view>
		<view class="uiwu-flex-space">
			<view class="left uiwu-flex-column">
				<image :src="dataInfo.product_info?.image" mode="aspectFill"></image>
				<text>可兑积分：{{dataInfo.product_info?.give_integral}}</text>
			</view>
			<view class="start" v-if="dataInfo.device_info?.state == 0 && dataInfo?.subscribe_num == 0" @tap="TapStart(dataInfo)">
				<text>开始抓零食</text>
				<text>{{dataInfo.product_info?.gold}}币/次</text>
			</view>
			<view v-if="dataInfo.device_info?.state == 1" class="start start1" @tap="TapReservation(dataInfo)">
				<text v-if="!isReservation">预约抓零食</text>
				<text v-else>取消预约</text>
				<text style="white-space: nowrap;">{{dataInfo.product_info?.gold}}币/次（前面{{dataInfo.subscribe_num}}人排队）</text>
			</view>
			<view class="right uiwu-flex-column">
				<view class="image uiwu-flex-center">
					<image src="/static/dabi.png" mode="widthFix"></image>
				</view>
				<text>游戏币：{{dataInfo.product_info?.gold}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { uiwu } from '@/config/config';
	import { startGren , grabSubscribe , cancel_subscribe } from '@/api/api';
	import { ref } from 'vue';
	defineProps({
		dataInfo:{
			default:{},
			type:Object
		},
		monitor_code:{
			default:null,
			type:String
		}
	})
	const isStart = ref(true)
	const emits = defineEmits(['onStart','changeUpdate','moneyBuZu'])
	const isReservation = ref(false)
	const TapStart = async ({device_info}) : Promise<any> => {
		if(!isStart.value) return //防止重复点击
		isStart.value = false
		const result = await startGren({
			device_id:device_info.id,
			room_id:0
		})
		if(!result) return isStart.value = true
		if(result.data.room_id == 'now_money_lack'){
			isStart.value = true
			emits('moneyBuZu')
			return
		}
		emits('onStart',result.data.room_id)
		isStart.value = true
	}
	const TapReservation = async ({device_info}) : void => {
		const result = isReservation.value ? await cancel_subscribe({device_id:device_info.id}) : await grabSubscribe({device_id:device_info.id})
		if(!result) return 
		uiwu.toast(isReservation.value ? '取消成功' : '预约成功')
		isReservation.value = !isReservation.value
		emits('changeUpdate')
	}
	const setisReservation = async () => {
		isReservation.value = false
		await cancel_subscribe({device_id:device_info.id})
	}
	const getisReservation = () => {
		return isReservation.value
	}
	defineExpose({
		setisReservation,
		getisReservation
	})
</script>

<style lang="scss">
	.uiwu-button{
		padding: 0 28rpx;
		.uiwu-button-num{
			font-size: 18rpx;
			font-weight: 500;
			color: #FCE5C7;
			text-align: center;
			margin-bottom: 24rpx;
			padding-top: 2rpx;
		}
		.left{
			width: 180rpx;
			height: 211rpx;
			background: #F6AA00;
			border-radius: 24rpx;
			padding: 2rpx;
			image{
				width: 100%;
				height: 176rpx;
				border-radius: 24rpx;
			}
			text{
				font-size: 20rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 31rpx;
				margin-top: 2rpx;
				white-space: nowrap;
			}
		}
		.right{
			width: 180rpx;
			height: 211rpx;
			background: #F6AA00;
			border-radius: 24rpx;
			padding: 2rpx;
			.image{
				width: 100%;
				height: 176rpx;
				border-radius: 24rpx;
				background-color: #fff;
				image{
					width: 96rpx;
				}
			}
			text{
				font-size: 20rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 31rpx;
				margin-top: 2rpx;
				white-space: nowrap;
			}
		}
		.start{
			width: 256rpx;
			height: 129rpx;
			background: url('../../static/start.png') no-repeat 0 0;
			background-size: 100% 100%;
			text-align: center;
			line-height: 90rpx;
			font-size: 36rpx;
			font-weight: 800;
			color: #FFFFFF;
			text-shadow: 0px 4rpx 0px #4C9F24;
			&.start1{
				background-image: url('../../static/yuyuebtn.png');
				text-shadow: 0px 4rpx 0px #C58800;
			}
			text{
				display: block;
				&:nth-child(2){
					font-size: 20rpx;
					font-weight: 500;
					color: #EF821E;
					text-shadow:none;
					padding-top: 10rpx;
				}
			}
		}
	}
</style>